<!-- 大屏端 -->

<template>
  <div :key="one.roleType">
    <FormSwitch label="大屏端" bind="rolePlatformDashboard" :disabled="one.roleType === 2" noMargin />

    <FormSlot label="大屏端权限" :bind="`${bindKey}Str`" noLabel :required="required">
      <EasyScroll :height="height" class="el-input__inner">
        <el-tree v-if="required" ref="tree" v-bind="treeProps" @check="toChange" />
      </EasyScroll>
    </FormSlot>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MyRegion from '@admin/views/System/User/UserRole/MyModal/MyRegion'

// ============================== 导出组件 ============================== //

export default CORE.extend(MyRegion, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyDashboard',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixTree('dashboard', 'dashboard_')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...MyRegion.computed,

    /**
     * 绑定键
     */
    bindKey: () => 'dashboardMenuIds',

    /**
     * 结构树数据
     */
    treeData() {
      return this.dashboard_tree
    },

    /**
     * 是否必填
     */
    required() {
      return this.one.roleType === 1 && this.one.rolePlatformDashboard === 1
    },
  },
})
</script>
